<template>
	<view class="all">
		<!--搜索框-->
		<view class="search" v-if="user.type == 1">
			<uni-icons class="icon-search" type="search" size="26" color="#D9D9D9"></uni-icons>
			<input 
				v-model="keyword" 
				@confirm="getHistory"
				confirm-type="search" 
			/>
			<view @click="getHistory" v-if="isSearch" class="confirm">搜索</view>
		</view>
		
		<view class="title">
			<text>智能问答</text>
			<image @click="logout" src="/static/logout.png"></image>
		</view>
		<view class="model" v-if="historys.length > 0">
			<view class="item" v-for="item in historys" :key="item.id" @click="toChat(item)">
				<view class="headimg">
					<view v-if="item.unread > 0" class="unread">{{ item.unread }}</view>
					<image :src="$request.baseUrl + item.img" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="header">
						<view class="nickname" v-if="item.uname == null">{{ item.tname }}</view>
						<view class="nickname" v-else>【{{ item.tname }}】{{item.uname}}</view>
						<view class="time">{{ item.date }}</view>
					</view>
					<view class="content" v-if="item.contentType == 0">{{ item.content }}</view>
					<view class="content" v-else>[图片]</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historys: [],
				keyword: '',
				isSearch: false,
				
				user: {}
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			this.getHistory()
		},
		onPullDownRefresh() {
			this.getHistory();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		watch: {
			keyword(newVal, oldVal) {
				if (newVal.length > 0) {
					this.isSearch = true
				} else {
					this.isSearch = false
				}
			}
		},
		methods: {
			init() {
				this.user = uni.getStorageSync('user')
				let user = uni.getStorageSync('user')
				if (user == null || user == '') {
					uni.redirectTo({
						url: '/pages/loginwx/loginwx'
					})
				} else {
					if (user.type == 1) {
						uni.hideTabBar()
					} else {
						uni.showTabBar()
					}
				}
			},
			getHistory() {
				this.$request.get('/mini/chat/list?keyword=' + this.keyword).then(res => {
					if (res.code === 200) {
						this.historys = res.data
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
						if (res.code === 403) {
							uni.clearStorageSync()
							uni.redirectTo({ url: '/pages/loginwx/loginwx' })
						}
					}
				})
				this.keyword = ''
			},
			toChat(item) {
				let url = '/pages/chat/chat?tid=' + item.tid + '&uid=' + item.uid
				if (this.user.type == 0) {
					url = url + '&tname=' + item.tname
				} else {
					url= url +  '&uname=' + item.uname
				}
				uni.navigateTo({ url })
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					confirmColor: '#D43030',
					success(res) {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.redirectTo({
								url: '/pages/loginwx/loginwx'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.search {
		width: 660rpx;
		height: 80rpx;
		margin: 20rpx auto;
		border: 2rpx solid rgba(0, 134, 118, 0.1);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		position: relative;
	}
	.search input {
		width: 100%;
		height: 100%;
		padding-left: 20rpx;
		padding-right: 120rpx;
	}
	.search .icon-search {
		margin-left: 30rpx;
	}
	.search .confirm {
		position: absolute;
		right: 35rpx;
		font-size: 28rpx;
		color: #197368;
	}
	
	.title {
		width: 660rpx;
		margin: 20rpx auto;
		/* background-color: #ccc; */
		font-size: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.model {
		width: 678rpx;
		margin: 0 auto;
		padding: 10rpx 0;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 16rpx  rgba(0, 134, 118, 0.08);
	}
	.model .item {
		width: 678rpx;
		/* padding: 15rpx 0; */
		display: flex;
		align-items: center;
	}
	
	.item .headimg {
		width: 112rpx;
		height: 112rpx;
		margin: 0 15rpx;
		position: relative;
	}
	.item .headimg image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	.item .headimg .unread {
		width: 40rpx;
		height: 40rpx;
		color: #fff;
		background-color: #FF2C00;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
	}
	
	.item .info {
		height: 140rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-bottom: 1px solid rgba(0, 134, 118, 0.1);
	} 
	.item:last-child .info {
		border-bottom: none;
	}
	.info .header {
		width: 520rpx;
		display: flex;
		justify-content: space-between;
	}
	.header .nickname {
		width: 390rpx;
		font-size: 32rpx;
		color: #4E4E4E;
		
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.header .time {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(38, 42, 80, 0.6);
		display: flex;
		justify-content: flex-end;
	}
	.info .content {
		width: 490rpx;
		margin-top: 5rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-weight: 400;
		color: #B9BAC7;
	}
</style>